<template>
	<div class="app-container home">
		<noticeBar :dataList="noticeList"> </noticeBar>

		<el-row :gutter="20">
			<el-col :lg="12" :sm="24">
				<h2>{{ $t('layout.technicalSelection') }}</h2>
				<div style="float: left; width: 50%">
					<h4>{{ $t('layout.backendTechnology') }}</h4>
					<ul>
						<li>NET8</li>
						<li>JWT</li>
						<li>SqlSugar</li>
						<li>Quartz.Net</li>
						<li>Mapster</li>
						<li>MiniExcel</li>
						<li>Redis</li>
						<li>Signalr</li>
						<li>...</li>
					</ul>
				</div>
				<div style="float: right; width: 50%">
					<h4>{{ $t('layout.frontendTechnology') }}</h4>
					<ul>
						<li>Vue3</li>
						<li>Pinia</li>
						<li>Element plus</li>
						<li>Axios</li>
						<li>Sass</li>
						<li>Wangeditor</li>
						<li>Vite</li>
						<li>Composition api</li>
						<li>I18n</li>
						<li>...</li>
					</ul>
				</div>
			</el-col>
		</el-row>
		<el-divider />

	</div>
</template>

<script setup name="index">
import noticeBar from '@/components/NoticeBar/index'

const noticeList = ref(['系统公告1', '系统公告2'])

import defaultSettings from '@/settings'
const version = defaultSettings.version

function goTarget(url) {
	window.open(url, '__blank')
}
</script>

<style scoped lang="scss">
.home {
	blockquote {
		padding: 10px 20px;
		margin: 0 0 20px;
		font-size: 17.5px;
		border-left: 5px solid #eee;
	}

	hr {
		margin-top: 20px;
		margin-bottom: 20px;
		border: 0;
		border-top: 1px solid #eee;
	}

	.col-item {
		margin-bottom: 20px;
	}

	ul {
		padding: 0;
		margin: 0;
	}

	font-family: 'open sans',
	'Helvetica Neue',
	Helvetica,
	Arial,
	sans-serif;
	font-size: 13px;
	color: #676a6c;
	overflow-x: hidden;

	ul {
		list-style-type: none;
	}

	h4 {
		margin-top: 0px;
	}

	h2 {
		margin-top: 10px;
		font-size: 26px;
		font-weight: 100;
	}

	p {
		margin-top: 10px;

		b {
			font-weight: 700;
		}
	}

	.update-log {
		ol {
			display: block;
			list-style-type: decimal;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0;
			margin-inline-end: 0;
			padding-inline-start: 40px;
		}
	}
}
</style>
